<template>
  <main>
    <my-carousel :carouselList="carouselList"></my-carousel>
    <manage-table
      :tableName="tableName"
      :tableHeader="tableHeader"
      :dataList="carouselList"
      @edit="edit"
      @remove="remove"
    >
    </manage-table>
    <Button type="info" @click="add()">新增</Button>
    <Form id="edit" v-if="isShow">
      <Input type="text" v-model="carousel.title" placeholder="标题">
        <Icon type="md-create" slot="prepend"></Icon>
      </Input>
      <Input type="text" v-model="carousel.img" placeholder="图片链接" style="margin: 1rem 0;">
        <Icon type="md-images" slot="prepend"></Icon>
      </Input>
      <Input type="text" v-model="carousel.href" placeholder="超链接" style="margin-bottom: 1rem;">
        <Icon type="ios-link" slot="prepend"></Icon>
      </Input>
      <FormItem>
        <Button type="success" @click="publish(isUpdate ? 'update' : 'publish')">
          {{ isUpdate ? '更新' : '保存' }}
        </Button>
        <Button type="default" @click="close()">关闭</Button>
      </FormItem>
    </Form>
    <Modal v-model="modal" :title="confirmMsg.title" @on-ok="confirm">
      <p>
        {{confirmMsg.pre}}
        <span style="color: #ff9900">{{confirmMsg.name}}</span>
        {{confirmMsg.suf}}
      </p>
    </Modal>
  </main>
</template>

<script>
import {
  findCarouselList,
  findCarouselById,
  saveCarousel,
  updateCarousel,
  deleteCarousel
} from 'service'
import { loading } from 'mixins/loading'

export default {
  name: 'CarouselManage',
  mixins: [loading],
  data() {
    return {
      modal: false,
      isShow: false,
      isUpdate: false,
      tableName: 'carousel-manage',
      tableHeader: [
        {title: 'index', slot: 'index'},
        {title: '标题', key: 'title'},
        {title: '轮播图', slot: 'img'},
        {title: '超链接', key: 'href'},
        {title: '操作', slot: 'action'}
      ],
      carouselList: [
        {
          title: ''
        }
      ],
      carouselId: 0,
      carousel: {
        title: '',
        img: '',
        href: ''
      },
      confirmMsg: {
        title: '删除轮播图',
        pre: '您正在准备删除轮播图 ' ,
        name: '',
        suf: ' 确定吗？'
      },
    }
  },
  created() {
    this.getCarouselList()
  },
  methods: {
    async getCarouselList() {
      let res = await findCarouselList()
      this.carouselList = res.data.data
    },
    async edit(id) {
      let res = await findCarouselById(id)
      if (res.data.flag) {
        this.carousel = res.data.data
      } else {
        this.$Message.error({content: res.data.errorMsg})
      }
      this.isShow = true
      this.isUpdate = true
    },
    remove(row) {
      this.carouselId = row.id
      this.confirmMsg.name = row.title
      this.modal = true
    },
    async confirm() {
      let res = await deleteCarousel(this.carouselId)
      if (res.data.flag) {
        this.$Message.success('轮播图删除成功了哦~~')
        this.getCarouselList()
      } else {
        this.$Message.error('出错了owo，删除失败...')
      }
    },
    async publish(opt) {
      let validate = this.validate()
      if(validate) {
        this.openLoading('Saving~~')
        switch(opt) {
          case 'update': {
            let res = await updateCarousel(this.carousel)
            if (res.data.flag) {
              this.$Message.success('轮播图更新成功~~')
            } else {
              this.$Message.error('出错了owo，更新失败...')
            }
            this.isShow = false
            this.getCarouselList()
            this.$Spin.hide()
          } 
          case 'publish': {
            let res = await saveCarousel(this.carousel)
            if (res.data.flag) {
              this.$Message.success('轮播图保存成功~~')
            } else {
              this.$Message.error('出错了owo，更新失败...')
            }
            this.isShow = false
            this.getCarouselList()
            this.$Spin.hide()
          }
        }
      }
    },
    validate() {
      if (this.carousel.title.trim() === ''){
        this.$Message.warning('要输入轮播图标题哦~~')
        return false
      } else if (this.carousel.img.trim() === '') {
        this.$Message.warning('还没给轮播图设置图片呢~~')
        return false
      } else if (this.carousel.href.trim() === '') {
        this.$Message.warning('记得给轮播图加上链接哦~~')
        return false
      }
      return true
    },
    add() {
      this.carousel.id = 0
      this.carousel.title = ''
      this.carousel.img = ''
      this.carousel.href = ''
      this.isShow = true
      this.isUpdate = false
    },
    close() {
      this.isShow = false
    }
  },
  components: {
    "my-carousel": () => import("components/homePage/module/MyCarousel"),
    "manage-table": () => import('./unit/ManageTable')
  }
}
</script>

<style lang="scss" scoped>
main {
  max-width: 1000px; 
  button {
    float: right;
    margin: 0 1rem 1rem 0;
  }
  #edit {
    margin: 1rem;
    button {
      float: right;
      margin: 0 0.5rem;
    }
  }
}
</style>